<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xhr基础知识介绍</title>
  </head>
  <body>
    <script>
      // 创建xhr对象
      const xhr = new XMLHttpRequest();
      // 准备发送请求 调用open并不会发送请求，而只是做好发送请求前的准备工作

      // xhr.open('http方法get post put delete','地址url','是否异步true or false')

      // 发送请求 调用send()正式发送请求,send参数通过请求体携带数据
      xhr.send();

      // 监听事件 处理响应  当获取到响应之后会触发xhr对象的readystatechange事件，监控XMLHttpRequest对象的状态变化，指定回调函数
      //readystatechange事件 实际上也可以配合addeventListener使用
      //xhr.addEventListener('readystatechange',()={},'false')
      //   监听事件最好放在open之前
      xhr.onreadystatechange = function () {
        if (
          (xhr.readyState == 4 && (xhr.status >= 200) & (xhr.status < 300)) ||
          xhr.status === 304
        ) {
          alert(xhr.responseText);
        } else {
          alert(xhr.statusText);
        }
      };
      // timeout属性 设置请求的超时时间(单位 ms)
      xhr.timeout = 100;

      // readystatechange事件监听readyState这个状态的变化 它的值从0~4五个状态
      // 0未初始化 尚未调用send()
      // 1启动 调用open() 未调用send()
      // 2发送 调用send() 未接受响应
      // 3 接收 已经收到部分响应数据
      // 4 完成 已经接收全部响应数据 而且可以在浏览器中使用

      // * xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
      // * xhr.status：服务器返回的状态码，等于200表示一切正常。
      // * xhr.responseText：服务器返回的文本数据
      // * xhr.responseXML：服务器返回的XML格式的数据
      // * xhr.statusText：服务器返回的状态文本。
      // * xhr.timeout: 设置超时时间 和timeout事件连一起用
      // * xhr.withCredentials: 指定使用Ajax发送请求时是否携带cookie
      // * 使用Ajax发送请求，默认情况下，同域时，会携带Cookie;跨域时不会 设置withCredentials时 可跨域携带cookie 但是最后还要看服务器同不同意
    </script>
  </body>
</html>
